import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Table, Collapse } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './DevFixDetail.less';
const { Panel } = Collapse;
const procstatus = ['待处理', '处理中', '已处理'];
const bindstatus = ['未绑定', '已绑定'];

@connect(({ devrepair, loading }) => ({
  devrepair,
  loading: loading.models.devInfo,
}))
export default class DevFixDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    const { dispatch } = this.props;
    const { repairId } = this.props.match.params;
    dispatch({
      type: 'devrepair/fetch',
      payload: { repairId },
    });
  }

  render() {
    const columns = [
      {
        dataIndex: 'key',
        key: 'key',
      },
      {
        dataIndex: 'value',
        key: 'value',
      },
    ];
    const { devrepair } = this.props;
    const record = devrepair.detail;
    //console.log('record', devrepair);
    // const dataSource = Object.keys(record).map(item=>{ return {key:item,value:record[item]}})
    const dataSource = [
      { key: '提交日期', value: record.subDate },
      { key: '设备名', value: record.devName },
      { key: 'uuid', value: record.devUuid },
      { key: '报修人', value: record.reportor },
      { key: '单位名称', value: record.orgName },
      { key: '车牌号码', value: record.vehLicplateNo },
      { key: '绑定状态', value: bindstatus[record.bindFlag] },
      { key: '报修状态', value: procstatus[record.procStatus] },

      { key: '维修负责人', value: record.repairLeader },
      { key: '维修工程师', value: record.repairEngineer },
      { key: '故障描述', value: record.faultDescr },
    ];
    const stateSource = [];
    const netSource = [];
    //console.log('dataSource'.dataSource);
    return (
      <PageHeaderLayout>
        <Row gutter={24}>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card title="基本信息" className={styles.card}>
              <Table
                dataSource={dataSource}
                columns={columns}
                showHeader={false}
                pagination={false}
                size="middle"
                bordered={false}
              />
            </Card>
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card title="报修图片" className={styles.card}>
              <Collapse defaultActiveKey={['1']} >
                {
                  Array.isArray(record.faultPicUrl) ? record.faultPicUrl.map((item, index) => {
                    return (<Panel header={"上传图片" + (index + 1)} key={index + 1}>
                      <img src={item} className={styles.img} alt="" />
                    </Panel>)
                  }
                  ) : null
                }
              </Collapse>
            </Card>
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card title="视频" className={styles.card}>
              <Collapse defaultActiveKey={['1']} >
                {
                  Array.isArray(record.faultVidUrl) ? record.faultVidUrl.map((item, index) => {
                    return (<Panel header={"上传视频" + (index + 1)} key={index + 1}>
                      <video
                        id="video"
                        width="300"
                        height="200"
                        controls="controls"
                        autoplay="autoplay"
                      >
                        <source id="mp4" src={item} />
                      </video>
                    </Panel>)
                  }
                  ) : null
                }
              </Collapse>
            </Card>
          </Col>
        </Row>
      </PageHeaderLayout>
    );
  }
}
